<template>
  <div>
    <section class="wrap">
      <aside class="v-aside">
        <Aside :noreply="list"></Aside>
      </aside>
      <div class="main">
        <header>
          <ul>
            <li
              @click="isClick(index,item.tab)"
              :class="{'active': index == tabsClick}"
              v-for="(item,index) in tabs"
              :key="index"
            >{{item.tab}}</li>
          </ul>
          <div class="clearfixed"></div>
        </header>
        <div class="content">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="reply-new">
              <span class="reply-time">{{item.create_at | date}}</span>
            </div>
            <img :src="item.author.avatar_url" width="30" height="30">
            <div class="reply-count">
              {{item.reply_count}}/
              <span>{{item.visit_count}}</span>
            </div>
            <div class="type-wrap" v-if="isAll">
              <div class="type" v-if="item.top == false">{{item.tab | tab}}</div>
              <div class="type active" v-else>置顶</div>
            </div>
            <div class="title">
              <router-link :to="{name:'detail',params:{id:item.id}}">{{item.title}}</router-link>
            </div>
          </div>
          <Pages :page-index="currentPage" :page-size="pageSize" @change="pageChange"></Pages>
        </div>
      </div>
      <div class="clearfixed"></div>
    </section>
  </div>
</template>

<script>
import Pages from "../components/pages";
import Aside from "../components/aside";
export default {
  components: {
    Pages,
    Aside
  },
  data() {
    return {
      tabs: [
        { tab: "全部" },
        { tab: "精华" },
        { tab: "分享" },
        { tab: "问答" },
        { tab: "招聘" },
        { tab: "客户端测试" }
      ],
      isAll: true,
      tabsClick: false,
      list: [],
      pageSize: 40, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 0 //总记录数
    };
  },
  created() {
    this.getList("all");
  },
  methods: {
    isClick(e, tab) {
      this.tabsClick = e;
      this.currentPage = 1;
      if (tab == "精华") {
        this.isAll = true;
        this.getList("good");
      } else if (tab == "分享") {
        this.isAll = true;
        this.getList("share");
      } else if (tab == "问答") {
        this.isAll = false;
        this.getList("ask");
      } else if (tab == "招聘") {
        this.isAll = false;
        this.getList("job");
      } else if (tab == "客户端测试") {
        this.isAll = false;
        this.getList("dev");
      } else if (tab == "全部") {
        this.isAll = true;
        this.getList("all");
      }
    },
    getList(tab) {
      this.$parent.show();
      this.$api.get(`/topics?tab=${tab}&page=${this.currentPage}&limit=${this.pageSize}`)
        .then(({ data, success }) => {
          if (success == true) {
            this.list = data;
            this.$parent.hide();
          }
        })
        .catch(() => {
          this.$parent.hide();
        });
    },

    //从page组件传递过来的当前page
    pageChange(page) {
      window.scrollTo(0, 0)
      this.currentPage = page;
      this.getList("all");
    }
  }
};
</script>

<style scoped>
.wrap .v-aside {
  vertical-align: top;
}
.main > header > ul > li {
  float: left;
  padding: 3px 4px;
  border-radius: 4px;
  margin: 8px 5px;
  color: #80bd01;
  cursor: pointer;
}
.main > header > ul > li:hover {
  color: #005580;
}
.main > header > ul > li.active {
  color: #fff;
  background: #80bd01;
  text-decoration: underline;
}
.main .content .item {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  height: 50px;
  padding: 10px 0 10px 10px;
}
.main .content .item img {
  border-radius: 3px;
  float: left;
}
.main .content .item .reply-count {
  float: left;
  line-height: 30px;
  font-size: 0.8rem;
  color: #9e78c0;
  width: 70px;
  text-align: center;
}
.main .content .item .reply-count span {
  color: #b4b4b4;
}
.main .content .item .type {
  float: left;
  padding: 2px 5px;
  background: #eeeeee;
  color: #999;
  border-radius: 3px;
  font-size: 0.8rem;
  margin: 5px 5px 5px 0;
}
.main .content .item .type.active {
  background: #80bd01;
  color: #fff;
}
.main .content .item .title {
  line-height: 30px;
  color: #333;
  font-size: 1.1rem;
  max-width: 70%;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main .content .item .title:hover {
  text-decoration: underline;
}
.main .content .item .reply-new {
  float: right;
  line-height: 30px;
}
.main .content .item .reply-new img {
  padding: 5px;
}
.main .content .item .reply-new .reply-time {
  padding: 0 15px 0 5px;
  font-size: 0.8rem;
  color: #778087;
}
@media (max-width: 980px) {
  .main .content .item {
    padding: 10px 0 10px 5px;
  }
  .main .content .item .title {
    max-width: 100%;
    font-size: 0.85rem;
  }
}
</style>
